<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>找回密码</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
form {
	margin: 15px;
}
</style>
<script type="text/javascript">
    //验证手机号
    function checkPhone(){
	   var phone=$("#phone").val();
	   var phoneId=$("#phone_prompt");
	   var regPhone=/^1\d{10}$/;
	   if(phone==""){
		   phoneId.html("手机号为空，请输入手机号");   
		   return false;
	   }else if(regPhone.test(phone)==false){
		   phoneId.html("手机号码不正确，请重新输入");      		   
          return false;
	   }
	   phoneId.html("");
	   return true;
   } 
   //验证邮箱
   function checkEmail(){
	   var email=$("#email").val();
	   var email_prompt=$("#email_prompt");
	   email_prompt.html("");
	   var regEmail=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
	   if(regEmail.test(email)==false){
		   email_prompt.html("邮箱格式不正确，例如web@sohu.com");
		   return false;
	   }
	   return true;
   }
   //验证密码
   function checkPwd(){
	   var pwd=$("#pwd").val();
	   var pwdId=$("#pwd_prompt");
	   var regPwd=/^[a-zA-Z0-9]{4,10}$/;
	   pwdId.html("");
	   if(regPwd.test(pwd)==false){
		   pwdId.html("密码不能含有非法字符，长度在4-10之间");
		   return false;
	   }
	   return true;
   }
   
   //验证两次输入的密码是否一致
   function checkRepwd(){
	   var pwd=$("#pwd").val();
	   var pwd2=$("#pwd2").val();
	   var repwd2=$("#pwd2_prompt");
	   if(pwd!=pwd2){
		   repwd2.html("两次输入的密码不一致");
		   return false;
	   }
	   repwd2.html("");
	   return true;
   }
</script>
</head>
<body>
	<div id="app">
		<form role="form" class="form-horizontal">
			<div>
				<h3>通过手机号或邮箱找回密码</h3>
			</div>

			<div class="form-group">
				<div class="col-sm-3">
					<input type="text" name="phone" id="phone" class="form-control in"
						placeholder="请输入手机号" onblur="checkPhone()"/>
					<div id="phone_prompt"></div>
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-3">
					<input type="text" name="email" id="email" class="form-control"
						placeholder="请输入邮箱" onblur="checkEmail()"/>
					<div id="email_prompt"></div>
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-3">
					<input type="password" id="pwd" class="form-control"
						name="password" value="" placeholder="请输入新的密码" onblur="checkPwd()">
						<div id="pwd_prompt"></div>
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-3">
					<input type="password" id="pwd2" class="form-control" value=""
						placeholder="请再次输入密码" onblur="checkRepwd()">
						<div id="pwd2_prompt"></div>
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-3">
					<input type="button" v-on:click="sub()" name='sub'
						class="btn btn-danger btn-lg active" id='btn' data-toggle="modal"
						data-target="#myModal" style="width: 180px" value="提交" />
				</div>
			</div>
		</form>
	</div>

    <!-- 模态框 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">Modal title</h4>
				</div>
				<div class="modal-body">
					<p>恭喜您，修改成功！</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
</body>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el : '#app',
		methods : {
			sub : function() {
				var phone = $("#phone").val();
				var email = $("#email").val();
				var password = $("#pwd").val();
				var password2 = $("#pwd2").val();
				$.ajax({
					type : 'post',
					url : 'update?password3=' + password,
					dataType : 'json',
					async : false,
					data : {
						phone : phone,
						email : email,
					},
					success : function(data) {
						/* alert(data);
						alert("恭喜，修改成功！"); */					
					}
				});
			}
		}
	});
</script>

<!-- <script type="text/javascript">
   $(function(){
	   $("#btn").click(function(){
		   var phone=$("#phone").val();
		   var email=$("#email").val();
		   var password=$("#pwd").val();
		   var password2=$("#pwd2").val();
		   alert(password);
		   $.ajax({
			   type:'post',
			   url:'update?password3='+password,
			   /* 'phone2='+phone+'email2='+email+'' */
			   dataType:'json',
			   data:{
				 phone:phone,
				 email:email,
			   },
			   success:function(data){
				   alert(data);
				   alert("恭喜，修改成功！");
			   }
		   });
	   });
   });
</script> -->


</html>



